html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box > div > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box > div .one {
  width: 100%;
  height: 100%;
  background: url(../../images/1/banner1.png) no-repeat;
  background-size: 100% 100%;
}

.box > div .one .popup {
  position: absolute;
  width: 33.92rem;
  height: 18.986667rem;
  top: 23.626667rem;
  left: 50%;
  margin-left: -16.96rem;
  background: #ffffff;
  border-radius: 1.6rem;
  display: none;
}

.box > div .one .popup dl {
  width: 11.306667rem;
  float: left;
}

.box > div .one .popup dl dt {
  margin-bottom: 1.28rem;
}

.box > div .one .popup dl dt img {
  width: 11.306667rem;
  height: 11.306667rem;
}

.box > div .one .popup dl dd {
  text-align: center;
  font-size: 1.28rem;
  color: #333333;
}

.box > div .one .popup dl:nth-of-type(1) {
  margin: 2.56rem 2.56rem 0 4.373333rem;
}

.box > div .one .popup dl:nth-of-type(2) {
  margin: 2.56rem 0 0 0;
}

.box > div .one .bg11 {
  position: absolute;
  width: 27.36rem;
  height: 7.26rem;
  background: url(../../images/1/i-Chengdu-2.png) no-repeat;
  background-size: 100% 100%;
  bottom: 52rem;
  left: 50%;
  margin-left: -13.68rem;
  animation-duration: 1.5s;
}

.box > div .one .bg12 {
  position: absolute;
  width: 19.413333rem;
  height: 37.653333rem;
  background: url(../../images/1/shouji@2x.png) no-repeat;
  background-size: 100% 100%;
  bottom: 10.666667rem;
  left: 50%;
  margin-left: -9.706667rem;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
}

.box > div .one .bg13 {
  position: absolute;
  width: 9.6rem;
  height: 3.093333rem;
  background: url(../../images/1/button@2x.png) no-repeat;
  background-size: 100% 100%;
  bottom: 5.866667rem;
  left: 50%;
  margin-left: -4.8rem;
}

.box > div .one .bg14 {
  position: absolute;
  width: 28.586667rem;
  height: 1.386667rem;
  background: url(../../images/1/icon@2x.png) no-repeat;
  background-size: 100% 100%;
  bottom: 1.6rem;
  left: 50%;
  margin-left: -14.293333rem;
}

.box > div .one .bg15 {
  position: absolute;
  width: 6.4rem;
  height: 2.453333rem;
  background: url(../../images/1/plone.png) no-repeat;
  background-size: 100% 100%;
  bottom: 9.333333rem;
  right: 6.88rem;
  animation-duration: 1s;
  animation-delay: 1.5s;
}

.box > div .two {
  width: 100%;
  height: 100%;
  background: url(../../images/2/bg2.png) no-repeat;
  background-size: 100% 100%;
}

.box > div .two .bg21 {
  position: absolute;
  width: 29.546667rem;
  height: 7.52rem;
  background: url(../../images/2/txt2.png) no-repeat;
  background-size: 100% 100%;
  top: 9.6rem;
  left: 50%;
  margin-left: -14.773333rem;
  animation-duration: 2s;
}

.box > div .two .bg22 {
  position: absolute;
  width: 22.346667rem;
  height: 29.173333rem;
  background: url(../../images/2/man.png) no-repeat;
  background-size: 100% 100%;
  bottom: 14.933333rem;
  left: 50%;
  margin-left: -11.173333rem;
  animation-delay: 0.5s;
}

.box > div .three {
  width: 100%;
  height: 100%;
  background: url(../../images/3/bg3.png) no-repeat;
  background-size: 100% 100%;
}

.box > div .three .bg31 {
  position: absolute;
  width: 29.28rem;
  height: 7.573333rem;
  background: url(../../images/3/txt.png) no-repeat;
  background-size: 100% 100%;
  top: 9.6rem;
  left: 50%;
  margin-left: -14.64rem;
  animation-duration: 1.5s;
}

.box > div .three .bg32 {
  position: absolute;
  width: 24rem;
  height: 24rem;
  background: url(../../images/3/map.png) no-repeat;
  background-size: 100% 100%;
  bottom: 16rem;
  left: 50%;
  margin-left: -11.5rem;
  animation-delay: 1s;
  animation-duration: 0.5s;
  z-index: 1;
}
 .box > div .three .wifi_site {
  position: absolute;
  z-index: 99;
  width: 3.2rem;
  height: 4.3rem;
  background: url(../../images/3/wifiSite.png) no-repeat;
  background-size: 100% 100%;
  animation-delay: 1.5s;
  animation-duration: 1s;
}
.map .site1 { bottom: 9.7rem; left: 1.9rem; }
.map .site2 { bottom: -6.5rem; left: 4.2rem; }
.map .site3 { bottom: 16.5rem; left: 4.2rem; }
.map .site4 { bottom: -6.5rem; left: 4.2rem; }
.map .site5 { bottom: -6.5rem; left: 4.2rem; }
.map .site6 { bottom: 4.5rem; left: -10.2rem; }


.box > div .four {
  width: 100%;
  height: 100%;
  background: url(../../images/4/bg4.png) no-repeat;
  background-size: 100% 100%;
}

.box > div .four .bg41 {
  position: absolute;
  width: 29.28rem;
  height: 7.573333rem;
  background: url(../../images/4/txt2.png) no-repeat;
  background-size: 100% 100%;
  top: 9.6rem;
  left: 50%;
  margin-left: -14.64rem;
  animation-duration: 1.5s;
}

.box > div .four .bg42 {
  position: absolute;
  width: 29.066667rem;
  height: 32rem;
  background: url(../../images/4/city.png) no-repeat;
  background-size: 100% 100%;
  bottom: 0;
  left: 50%;
  margin-left: -14.533333rem;
  animation-delay: 1s;
  animation-duration: 0.5s;
}

.box > div .four .bg43 {
  position: absolute;
  width: 12.906667rem;
  height: 18.346667rem;
  background: url(../../images/4/map.png) no-repeat;
  background-size: 100% 100%;
  bottom: 26.133333rem;
  left: 14.613333rem;
  animation-delay: 1s;
}

.box > div .four .bg44 {
  position: absolute;
  width: 1.28rem;
  height: 1.28rem;
  background: url(../../images/3/dot.png) no-repeat;
  background-size: 100% 100%;
  bottom: 25.866667rem;
  left: 13.653333rem;
  animation-delay: 1s;
}


.box > div .five {
  width: 100%;
  height: 100%;
  background: url(../../images/5/bg5.png) no-repeat;
  background-size: 100% 100%;
}

.box > div .five .bg51 {
  position: absolute;
  width: 5.92rem;
  height: 8rem;
  background: url(../../images/5/balloon1.png) no-repeat;
  background-size: 100% 100%;
  top: 1.333333rem;
  left: 4.253333rem;
  animation-delay: 1.5s;
  animation-duration: 1s;
}

.box > div .five .bg52 {
  position: absolute;
  width: 3.92rem;
  height: 5rem;
  background: url(../../images/5/balloon2.png) no-repeat;
  background-size: 100% 100%;
  top: 22.373333rem;
  right: 1.506667rem;
  animation-duration: 1s;
  animation-delay: 1s;
}

.box > div .five .bg53 {
  position: absolute;
  width: 32.493333rem;
  height: 7.626667rem;
  background: url(../../images/5/txt.png) no-repeat;
  background-size: 100% 100%;
  top: 12.753333rem;
  left: 3.306667rem;
  animation-duration: 2s;
}

.box > div .five .bg54 {
  position: absolute;
  width: 16.92rem;
  height: 18.026667rem;
  background: url(../../images/5/panda.png) no-repeat;
  background-size: 100% 100%;
  bottom: 15.12rem;
  left: 11.4rem;
  z-index: 99;
  animation-duration: 2s;
  animation-delay: 0.2s;
}

.box > div .five .bg55 {
  position: absolute;
  width: 33.746667rem;
  height: 30.733333rem;
  background: url(../../images/5/bubbles_03.png) no-repeat;
  background-size: 100% 100%;
  bottom: 7.733333rem;
  left: 2.6rem;
  z-index: 1;
  animation-duration: 1s;
  animation-delay: 2s;
}





.box > div .bg6 {
  position: absolute;
  width: 1.92rem;
  height: 1.066667rem;
  background: url(../../images/down.png) no-repeat;
  background-size: 100% 100%;
  bottom: 1.6rem;
  left: 50%;
  margin-left: -0.96rem;
  animation-duration: 1s;
  animation-delay: 2s;
}